<template>
  <div class="immersion-overflow-box">

    <!-- 筛选漫入漫出框 -->
    <div class="mode-select">
      <el-col :span="20">
        <el-select
          v-model="currentMode"
          @change="changeMode"
        >
          <el-option
            v-for="(item,index) in modeOption"
            :key="index"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-col>
    </div>
    <!-- 月份筛选框 -->
     <div class="month-select">
      <el-col :span="20">
        <el-select
          v-model="ptMonth"
        >
          <el-option
            v-for="(item,index) in monthList"
            :key="index"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-col>
    </div>
    <!-- 迁徙图地图 -->
    <div class="map-box">
      <migration-map  :type="currentMode" :ptMonth="ptMonth" ></migration-map>
    </div>
    <!--漫入漫出图表图层 -->
    <div class="panel-box">
      <mobile-panel
        top="10%"
        right="0px"
        :name="modeOption[currentMode-1].label"
        bearing="2"
        classNames="charts-panel"
        @moving="changeMoveState"
        :showBox="true"
      >
        <charts-panel  :type="currentMode" :ptMonth="ptMonth" ></charts-panel>
      </mobile-panel>
    </div>
    <!-- 蒙层start -->
    <div class="mode-layer" v-show="isMove" ></div>
    <!-- 蒙层end -->

  </div>
</template>

<script>
import * as echarts from 'echarts'
import migrationMap from './com/migrationMap.vue'
import MobilePanel from '@/components/gisPageComponents/mobilePanel'
import chartsPanel from './com/chartsPanel.vue'

import { mapGetters, mapState, createNamespacedHelpers } from 'vuex'
const { mapState: mapStateForm, mapMutations: mapMutationsForm } = createNamespacedHelpers("gisForm");


export default {
  components: {
    migrationMap, MobilePanel, chartsPanel,
  },
  name: 'immersionAndOverflow',
  data() {
    return {
      // 当前显示状态:  1:漫入用户分析, 2: 漫出用户分析, 3: 漫入用户分布,
      currentMode: 1,
      modeOption: [
        { value: 1, label: '漫入用户分析' },
        { value: 2, label: '漫出用户分析' },
        { value: 3, label: '漫入区县用户分布' },
      ],
      isMove: false,

    }
  },
  computed: {
    ...mapState([ 'gisForm' ]),
    ...mapStateForm([
      'monthList', //月份列表
    ]),
    // 月份
    ptMonth:{
      get() { return this.gisForm.ptMonth },
      set(nv) { this.setPtMonth(nv) }
    },
  },
  created() {
    this.setMonthList();
  },
  mounted() {

  },
  methods: {
    ...mapMutationsForm([
      'setPtMonth',//月份
      'setMonthList'
    ]),
    changeMode() {

    },
    changeMoveState(nv) {
      // console.log(nv);
      this.isMove = nv;
    }
  }
}
</script>

<style lang="scss" scoped>

.immersion-overflow-box {
  position: relative;
  width: 100%;
  height: 100%;

  .mode-select {
    position: absolute;
    top: 30px;
    left: 30px;
    z-index: 1;
  }
  .month-select {
    position: absolute;
    top: 30px;
    left: 230px;
    z-index: 1;
  }

  .map-box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    > div {
      width: 100%;
      height: 100%;
    }
  }
}




/* 蒙层 */
.mode-layer {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
}

</style>
